<template>
  <div>
    <a-card>
      <!-- 搜索栏 -->
      <!-- 使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔 -->
      <a-row :gutter="20">
        <a-col :span="6">
          <!-- v-model是vue.js中内置的双向数据绑定指令
                  v-model="queryParam.title" 绑定搜索列的名称；
                  @search="getArtList"绑定搜索方法;
          allowClear 可以点击清除图标删除内容-->
          <a-input-search
            v-model="queryParam.username"
            placeholder="请输入文章标题查找"
            enter-button
            allowClear
          />
        </a-col>
        <a-col :span="6">
          <a-button type="primary" icon="plus-circle" @click="$router.push('/admin/addart')" >新增</a-button>
        </a-col>
        <a-col :span="6" :offset="-4">
          <a-select defaultValue="请选择分类" style="width:200px" @change="cateChange">
            <a-select-option v-for="item in cateList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <!-- 数据表格 -->
      <!-- :columns="columns" 表格列的配置描述 ;
             :data-source="artList" 绑定数据
             bordered 是否展示外边框和列边框
      rowKey 表格行 key 的取值，可以是字符串或一个函数-->
      <a-table
        bordered
        :pagination="pagination"
        @change="handleTableChange"
        :columns="columns"
        :data-source="artList"
        rowKey="ID"
      >
          <!-- 设置图片显示格式 -->
        <span class="ArtImg" slot="img" slot-scope="img">
          <img :src="img" />
        </span>
          <!-- 操作列 ；
                slot="action" 绑定columns对应列的key
                slot-scope="data" 带数据的插槽
                @click="deleteArt(data.ID) 绑定删除事件
          -->
        <template slot="action" slot-scope="data">
          <div>
            <a-button size="small"
              style="margin-right:15px"
              icon="read"
              @click="getArtInfo(data.ID)"
              >详情</a-button>
            <a-button size="small"
              type="primary"
              icon="edit"
              style="margin-right:15px"
              @click="$router.push(`/admin/addart/${data.ID}`)"
              >编辑</a-button>
            <a-button
              size="small"
              type="danger"
              icon="delete"
              style="margin-right:15px"
              @click="deleteArt(data.ID)"
            >删除</a-button>
          </div>
        </template>
      </a-table>
    </a-card>
    <!-- 文章详情页 -->
    <a-modal
      title="文章详情"
      closable
      :visible="visible"
      on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          Return
        </a-button>
      </template>
        <a-descriptions :model="artInfo">
          <a-descriptions-item label="Title">
              {{  artInfo.title }}
          </a-descriptions-item>
          <a-descriptions-item label="分类">
            {{  artInfo.cid }}
          </a-descriptions-item>
          <a-descriptions-item label="文章描述">
            {{ artInfo.desc }}
          </a-descriptions-item>
          <a-descriptions-item label="缩略图">
            <!-- {{ artInfo.img }} -->
            <img :src="artInfo.img" style="width:150px;height:100px" />
          </a-descriptions-item>
          <a-descriptions-item label="文章内容">
            {{ artInfo.content }}
          </a-descriptions-item>
        </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    width: '5%',
    key: 'id',
    align: 'center'
  },
  {
    title: '分类',
    dataIndex: 'Category.name',
    width: '10%',
    key: 'name',
    align: 'center'
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    width: '10%',
    key: 'title',
    align: 'center'
  },
  {
    title: '文章描述',
    dataIndex: 'desc',
    width: '10%',
    key: 'desc',
    align: 'center'
  },
  {
    title: '缩略图',
    dataIndex: 'img',
    width: '15%',
    key: 'img',
    align: 'center',
    scopedSlots: { customRender: 'img' }
  },
  {
    title: '操作',
    width: '20%',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data () {
    return {
      columns,
      artList: [],
      cateList: [],
      artInfo: {
        titie: '',
        cid: 'undefined',
        desc: '',
        content: '',
        img: ''
      },
      // 分页设置，hideOnSinglePage 数据只有一页时隐藏分页
      pagination: {
        pageSizeOptions: ['5', '10', '20'],
        pageSize: 5,
        total: 0,
        showSizeChanger: true,
        hideOnSinglePage: true,
        showTotal: (total) => `共${total}条`
      },
      queryParam: {
        // 默认不查询，显示所有
        title: '',
        // 每页5 条，当前页
        pageSize: 5,
        pageNum: 1
      },
      // 模态对话框 默认false 关闭
      visible: false
    }
  },
  // 生命周期函数
  created () {
    this.getArtList()
    this.getCateList()
  },
  methods: {
    // 获取后端数据列表
    async getArtList () {
      const { data: res } = await this.$http.get('articles', {
        params: {
          title: this.queryParam.title,
          pagesize: this.queryParam.pageSize,
          pagenum: this.queryParam.pageNum
        }
      })
      // console.log(res.data)
      if (res.status !== 200) return this.$message.error(res.message)
      this.artList = res.data
      this.pagination.total = res.total
    },
    // 更改分页
    handleTableChange (pagination, filters, sorter) {
      var pager = { ...this.pagination }
      pager.current = pagination.current
      pager.pageSize = pagination.pageSize
      this.queryParam.pageSize = pagination.pageSize
      this.queryParam.pageNum = pagination.current

      if (pagination.pageSize !== this.pagination.pageSize) {
        this.queryParam.pageNum = 1
        pager.current = 1
      }
      this.pagination = pager
      this.getArtList()
    },
    // 删除文章操作
    deleteArt (id) {
      this.$confirm({
        title: '提示： 确认删除该文章吗？',
        content: '一旦删除，则无法恢复',
        onOk: async () => {
          const res = await this.$http.delete(`article/${id}`)
          if (res.status !== 200) return this.$message.error(res.message)
          this.$message.success('删除成功')
          this.getArtList()
        },
        onCancel: () => {
          this.$message.info('取消删除该文章')
        }
      })
    },
    // 获取分类
    async getCateList () {
      const { data: res } = await this.$http.get('cates')
      if (res.status !== 200) return this.$message.error(res.message)
      this.cateList = res.data
      this.pagination.total = res.total
    },
    // 查询分类下的文章
    async getCateArt (id) {
      const { data: res } = await this.$http.get(`article/list/${id}`)
      // console.log(res)
      if (res.status !== 200) return this.$message.error(res.message)
      this.artList = res.data
      this.pagination.total = res.total
    },
    // 查询分类下的文章事件
    cateChange (value) {
      this.getCateArt(value)
    },
    // 查看文章详情
    async getArtInfo (id) {
      this.visible = true
      const { data: res } = await this.$http.get(`article/info/${id}`)
      console.log(res.data)
      this.artInfo = res.data
      this.artInfo.cid = res.data.Category.name
      this.artInfo.id = id
      console.log(this.artInfo.id)
      console.log(this.artInfo.cid)
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.ArtImg {
  height: 100%;
  width: 100%;
}

.ArtImg img {
  width: 150px;
  height: 100px;
}
</style>
